<template>
  <view class="container vmodel">
    <view v-if="bgShow" class="v-bg animate__animated animate__fadeIn"></view>
    <view class="mid-scene" v-if="midShow">
      <view class="image_wrap animate__animated animate__zoomIn">
        <image
          class="mid-image"
          style="width: 300px; height: 300px"
          src="/src/static/images/crystal.png"
          mode="widthFix"
        />
        <view class="suipian">恭喜获得{{ shuijin_suipian }}个水晶碎片</view>
      </view>
    </view>
    <view class="prize-scene animate__animated animate__shakeX" v-if="prizeShow">
      <view>
        <view class="v-box">
          <!-- <image class="prizeImage" mode="widthFix" style="width: 360px;" src="/src/static/images/composite.png" @error="imageError" /> -->
          <view class="v-p1">
            <view class="t1">距合成水晶仅差</view>
            <view class="t2">
              <view class="t3">{{ more_shuijin_suipian }}</view>
              <view class="t4">个碎片</view>
            </view>
          </view>
        </view>

        <!-- <view class="v-btn-wrap" justify-content="center" text-align="center">
					<image class="v-btn" @click="navigateTo('/pages/profile/index')" mode="widthFix"
						src="/src/static/images/prize_view_btn.png" />
				</view> -->
      </view>
    </view>

    <view class="third-scene" v-if="speedupShow">
      <image
        @click="share"
        class="mid-image animate__animated animate__bounceInDown"
        style="width: 300px"
        src="/src/static/images/speedup.png"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<script setup>
  import { ref, unref } from 'vue';
  import 'animate.css';
  const bgShow = ref(false);
  const midShow = ref(false);
  const prizeShow = ref(false);
  const speedupShow = ref(false);
  const shuijin_suipian = ref(0);
  const more_shuijin_suipian = ref(0);

  function imageError(e) {}

  // function navigateTo(url) {
  // 	bgShow.value = false
  // 	prizeShow.value = false
  // 	uni.switchTab({
  // 		url: '/pages/warehouse/index',
  // 	});
  // }

  const props = defineProps(['prizeName', 'share']);

  function showMidPop(suipian) {
    if (suipian >= 100) {
      suipian = 99;
    }
    shuijin_suipian.value = suipian;
    more_shuijin_suipian.value = 100 - suipian;
    bgShow.value = true;
    midShow.value = true;
    setTimeout(() => {
      midShow.value = false;
      prizeShow.value = true;
      setTimeout(() => {
        prizeShow.value = false;
        speedupShow.value = true;
      }, 3500);
    }, 1500);
  }
  function showPrizePop() {
    midShow.value = false;
    prizeShow.value = true;
  }
  function closeMidPop() {
    bgShow.value = false;
    midShow.value = false;
  }
  function closePop() {
    bgShow.value = false;
    midShow.value = false;
    prizeShow.value = false;
    speedupShow.value = false;
  }
  defineExpose({
    showMidPop,
    showPrizePop,
    closePop,
    closeMidPop,
  });
</script>

<style lang="less">
  .vmodel .v-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    cursor: pointer;
  }

  .mid-scene {
    .image_wrap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 1000;
      width: 300px;
      height: 460px;
    }

    .suipian {
      color: #fff;
      text-align: center;
      font-size: 35rpx;
    }
  }
  .third-scene {
    .mid-image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 1000;
    }
  }

  .prize-scene {
    width: 300px;
    height: 460px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1000;

    .v-p1 {
      text-align: center;
      position: absolute;
      left: 100px;
      bottom: 60px;
      .t1 {
        color: #fff;
        font-size: 30rpx;
        text-align: center;
        width: 150px;
      }
      .t2 {
        text-align: center;
        width: 150px;
      }
      .t3 {
        color: #fff;
        font-size: 100rpx;
        display: inline-block;
      }
      .t4 {
        color: #fff;
        font-size: 20px;
        display: inline-block;
      }
    }
    .v-box {
      width: 350px;
      height: 310px;
      background-image: url(/src/static/images/composite.png);
      background-size: 100% 100%;
      display: block;
      position: relative;
      z-index: 1000;
      margin-left: -28px;
      .prizeImage {
        position: absolute;
        z-index: 1000;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }

  @keyframes spin {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
</style>
